<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>资产详情</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layui/layuiAdmin/css/admin.css" media="all">
    <style>
        .host-info-container {
            display: flex;
            flex-wrap: wrap;
        }
        .host-info-container .layui-form-item {
            width: 25%;
            box-sizing: border-box;
            padding-right: 10px;
            display: flex;
            align-items: center;
        }
        .host-info-container .layui-form-label {
            width: 95px; /* 设置标签固定宽度 */
            padding: 9px 15px;
            box-sizing: border-box;
            text-align: right;
        }
        .host-info-container .layui-input-inline.st {
            flex: 1;
        }
    </style>
</head>
<body>
<div class="layui-form" lay-filter="layuiadmin-form-hostadmin" id="layuiadmin-form-hostadmin" style="padding: 20px 0 0 0;">
    <div class="host-info-container">
        <!--  主机名  -->
        <div class="layui-form-item">
            <label class="layui-form-label">主机名<span class="xinghao">*</span></label>
            <div class="layui-input-inline st">
                <input type="text" name="hostName" readonly lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <!--  mac地址  -->
        <div class="layui-form-item">
            <label class="layui-form-label">MAC地址<span class="xinghao">*</span></label>
            <div class="layui-input-inline st">
                <input type="text" name="macAddress" readonly lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">IP地址<span class="xinghao">*</span></label>
            <div class="layui-input-inline st">
                <input type="text" name="ipAddress" readonly lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">系统类型<span class="xinghao">*</span></label>
            <div class="layui-input-inline st">
                <input type="text" name="osType" readonly lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">系统版本<span class="xinghao">*</span></label>
            <div class="layui-input-inline st">
                <input type="text" name="osName" readonly lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">内存<span class="xinghao">*</span></label>
            <div class="layui-input-inline st">
                <input type="text" name="ram" readonly lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">CPU<span class="xinghao">*</span></label>
            <div class="layui-input-inline st">
                <input type="text" name="cpuName" readonly lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="border-radius: 0;border-top: 4px solid #d2d2d2;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">选择查看</label>
                    <div class="layui-input-inline">
                        <select name="viewType" lay-filter="viewType">
                            <option value="account">账号</option>
                            <option value="app">应用</option>
                            <option value="process">进程</option>
                            <option value="service">服务</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-card-body">

            <div style="padding-bottom: 10px;">
                <!-- 保留按钮 -->
            </div>

            <!--  表格数据加载 -->
            <table id="LAY-host-manage" lay-filter="LAY-host-manage"></table>

            <!--  创建时间格式化处理 -->
            <script type="text/html" id="createTimeTpl">
                {{formatDate(d.createTime)}}
            </script>

            <!--  更新时间格式化处理 -->
            <script type="text/html" id="updateTimeTpl">
                {{formatDate(d.updateTime)}}
            </script>

        </div>
    </div>
</div>

<script src="/layui/layui.js"></script>
<script type="text/javascript">
    // 日期格式转换函数
    function formatDate(str) {
        if(str != null){
            var now = new Date(str);
            var year = now.getFullYear();  //取得4位数的年份
            var month = now.getMonth() + 1;  //取得日期中的月份，其中0表示1月，11表示12月
            var date = now.getDate();      //返回日期月份中的天数（1到31）
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            return year + "-" + month + "-" + date +" "+hours+":"+minutes+":"+seconds;
        }
        return "";
    }
</script>
<script type="text/javascript">

    layui.config({
        base: '/layui/layuiAdmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['layer','table','form'], function(){
        var $ = layui.$
            ,form = layui.form
            ,layer = layui.layer
            ,table = layui.table;
        var macAddress;
        window.setMacAddress = function(address) {
            macAddress = address;
            // 初始化渲染账号表格
            renderTable('/account/list', accountCols);
        }
        // 渲染表格函数
        function renderTable(url, cols) {
            table.render({
                elem: '#LAY-host-manage'
                ,method: 'post'
                ,url: url
                ,headers: {
                    'Authorization': localStorage.getItem('token')
                }
                ,width: 'auto'// 自适应宽度
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度
                ,title: '系统用户数据表'
                ,cols: cols
                ,page: {
                    curr: 1 //设定初始在第 1 页
                    ,limit: 5 //设定初始每页显示 5 条
                },
                limits:[5,10,15,20],
                where: {
                    macAddress: macAddress // 传递主机 MAC 地址作为参数
                }
            });
        }


        // 账号表格列配置
        var accountCols = [
            [
                {type: 'checkbox', fixed: 'left'},
                // {field:'id',title:'ID',width: 40},
                {field:'macAddress', title:'MAC地址',width: 160},
                {field:'name', title:'账号名字',width: 160},
                //{field:'fullName', title:'用户全名',width: 89},大多为空，冗余
                {field:'sid', title:'账户SID',width: 89},
                {field:'sidType', title:'SID类型',width: 87},
                {field:'status', title:'账户状态',width: 89},
                {field:'disabled', title:'账户是否禁用',width: 118,templet:function (d){
                        if(d.disabled === 1){
                            return "<button class='layui-btn layui-btn-normal layui-btn-xs'>是</button>";
                        }else if(d.disabled  === 0){
                            return "<button class='layui-btn layui-btn-danger layui-btn-xs'>否</button>";
                        }
                    }},
                {field:'lockout', title:'账户是否锁定',width: 118,templet:function (d){
                        if(d.lockout === 1){
                            return "<button class='layui-btn layui-btn-normal layui-btn-xs'>是</button>";
                        }else if(d.lockout  === 0){
                            return "<button class='layui-btn layui-btn-danger layui-btn-xs'>否</button>";
                        }
                    }},
                {field:'passwordChangeable', title:'密码是否可修改',width: 131,templet:function (d){
                        if(d.passwordChangeable === 1){
                            return "<button class='layui-btn layui-btn-normal layui-btn-xs'>是</button>";
                        }else if(d.passwordChangeable  === 0){
                            return "<button class='layui-btn layui-btn-danger layui-btn-xs'>否</button>";
                        }
                    }},
                {field:'passwordExpires', title:'密码是否必填',width: 118,templet:function (d){
                        if(d.passwordExpires === 1){
                            return "<button class='layui-btn layui-btn-normal layui-btn-xs'>是</button>";
                        }else if(d.passwordExpires === 0){
                            return "<button class='layui-btn layui-btn-danger layui-btn-xs'>否</button>";
                        }
                    }},
                {field:'passwordRequired', title:'密码是否过期',width: 118,templet:function (d){
                        if(d.passwordRequired === 1){
                            return "<button class='layui-btn layui-btn-normal layui-btn-xs'>是</button>";
                        }else if(d.passwordRequired === 0){
                            return "<button class='layui-btn layui-btn-danger layui-btn-xs'>否</button>";
                        }
                    }},
                {
                    field: 'riskLevel',
                    title: '风险等级',
                    width: 100,
                    templet: function(d) {
                        var colorMap = {
                            '高危': 'layui-bg-red',
                            '中危': 'layui-bg-orange',
                            '低危': 'layui-bg-blue',
                            '无风险': 'layui-bg-green'
                        };
                        return '<span class="layui-badge ' + (colorMap[d.riskLevel] || '') + '">' + d.riskLevel + '</span>';
                    }
                },
                {
                    field: 'aiResult',
                    title: 'AI分析',
                    width: 100,
                    templet: function(d){return d.aiResult;
                    }
                }

            ]
        ];

        // 应用表格列配置
        var appCols = [
            [
                {type: 'checkbox', fixed: 'left'},
                // {field:'id',title:'ID',width: 40},
                {field:'macAddress', title:'MAC地址',width: 160},
                {field:'displayName', title:'软件名称',width: 160},
                {field:'installLocation', title:'安装路径',width: 160},
                {field:'uninstallString', title:'卸载命令',width: 160},
                {field:'riskLevel', title:'风险等级',width: 100, templet:function(d){
                        var colorMap = {
                            '高危': 'layui-bg-red',
                            '中危': 'layui-bg-orange',
                            '低危': 'layui-bg-blue',
                            '无风险': 'layui-bg-green'
                        }; return '<span class="layui-badge '+ (colorMap[d.riskLevel] || '') +'">' + d.riskLevel + '</span>';
                    }}
            ]
        ];

        // 进程表格列配置
        var processCols = [
            [
                {type: 'checkbox', fixed: 'left'},
                {field:'macAddress', title:'MAC地址',width: 160},
                {field:'pid', title:'进程ID',width: 80},
                {field:'ppid', title:'父进程ID',width: 103},
                {field:'name', title:'进程名称',width: 120},
                {field:'cmd', title:'启动命令',width: 164},
                {field:'priority', title:'进程优先级',width: 115},
                {field:'description', title:'进程描述',width: 121},
                {
                    field: 'riskLevel',
                    title: '风险等级',
                    width: 100,
                    templet: function(d) {
                        var colorMap = {
                            '高危': 'layui-bg-red',
                            '中危': 'layui-bg-orange',
                            '低危': 'layui-bg-blue',
                            '无风险': 'layui-bg-green'
                        };
                        return '<span class="layui-badge ' + (colorMap[d.riskLevel] || '') + '">' + d.riskLevel + '</span>';
                    }
                }
            ]
        ];

// 服务表格列配置
        var serviceCols = [
            [
                {type: 'checkbox', fixed: 'left'},
                {field:'macAddress', title:'MAC地址',width: 160},
                {field:'protocol', title:'协议类型',width: 106},
                {field:'port', title:'端口号',width: 80},
                {field:'state', title:'端口状态',width: 128},
                {field:'name', title:'服务名称',width: 144},
                {field:'product', title:'服务产品',width: 126},
                {field:'version', title:'服务版本',width: 100},
                {field:'extrainfo', title:'额外信息',width: 100},
                {
                    field: 'riskLevel',
                    title: '风险等级',
                    width: 100,
                    templet: function(d) {
                        var colorMap = {
                            '高危': 'layui-bg-red',
                            '中危': 'layui-bg-orange',
                            '低危': 'layui-bg-blue',
                            '无风险': 'layui-bg-green'
                        };
                        return '<span class="layui-badge ' + (colorMap[d.riskLevel] || '') + '">' + d.riskLevel + '</span>';
                    }
                },
                {
                    field: 'aiResult',
                    title: 'AI分析',
                    width: 100,
                    templet: function(d){return d.aiResult;}
                }
            ]
        ];



        // 初始化渲染账号表格
        renderTable('/account/list', accountCols);

        // 监听选项框变化
        form.on('select(viewType)', function(data){
            var viewType = data.value;
            switch (viewType) {
                case 'account':
                    renderTable('/account/list', accountCols);
                    break;
                case 'app':
                    renderTable('/app/list', appCols);
                    break;
                case 'process':
                    renderTable('/process/list', processCols);
                    break;
                case 'service':
                    renderTable('/service/list', serviceCols);
                    break;
            }
        });

    });
</script>
</body>
</html>